React Maxsus Hook Bog'liqliklari: Samaradorlik uchun Effektni Optimallashtirishni O'zlashtirish

React maxsus hooklari komponentlaringiz bo'ylab mantiqni abstraktlashtirish va qayta ishlatish uchun kuchli vositadir. Biroq, `useEffect` ichidagi bog'liqliklarni noto'g'ri boshqarish samaradorlik muammolariga, keraksiz qayta renderlarga va hatto cheksiz tsikllarga olib kelishi mumkin. Ushbu qo'llanma `useEffect` bog'liqliklari haqida to'liq tushuncha beradi va maxsus hooklaringizni optimallashtirish bo'yicha eng yaxshi amaliyotlarni taqdim etadi.

useEffect va Bog'liqliklarni Tushunish

React-dagi `useEffect` hooki komponentlaringizda qo'shimcha effektlarni (side effects) bajarishga imkon beradi, masalan, ma'lumotlarni yuklash, DOM manipulyatsiyasi yoki obunalarni sozlash. `useEffect`ning ikkinchi argumenti - bu ixtiyoriy bog'liqliklar massivi. Bu massiv React-ga effekt qachon qayta ishga tushirilishi kerakligini bildiradi. Agar bog'liqliklar massividagi biror qiymat renderlar orasida o'zgarsa, effekt qayta ishga tushiriladi. Agar bog'liqliklar massivi bo'sh bo'lsa (`[]`), effekt faqat dastlabki renderdan keyin bir marta ishga tushadi. Agar bog'liqliklar massivi umuman ko'rsatilmasa, effekt har bir renderdan keyin ishga tushadi.

Nima uchun Bog'liqliklar Muhim

Bog'liqliklar effektingiz qachon ishlashini nazorat qilish uchun juda muhimdir. Agar siz effektni ishga tushirishga hojat bo'lmagan bog'liqlikni qo'shsangiz, keraksiz qayta ishga tushirishlarga duch kelasiz, bu esa samaradorlikka salbiy ta'sir ko'rsatishi mumkin. Aksincha, agar siz effektni ishga tushirishi *kerak* bo'lgan bog'liqlikni tashlab ketsangiz, komponentingiz to'g'ri yangilanmasligi mumkin, bu esa xatoliklarga va kutilmagan xatti-harakatlarga olib keladi. Keling, oddiy misolni ko'rib chiqaylik:

            
import React, { useState, useEffect } from 'react';

function ExampleComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    }

    fetchData();
  }, [userId]); // Dependency array: only re-run when userId changes

  if (!userData) {
    return 
Loading...
;
  }

  return (
    

      
{userData.name}
      
{userData.email}
    
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

Ushbu misolda effekt API'dan foydalanuvchi ma'lumotlarini oladi. Bog'liqliklar massiviga `userId` kiritilgan. Bu effekt faqat `userId` prop o'zgarganda ishga tushishini ta'minlaydi. Agar `userId` o'zgarishsiz qolsa, effekt qayta ishga tushmaydi va keraksiz API so'rovlarining oldi olinadi.

Keng Tarqalgan Xatolar va Ulardan Saqlanish Yo'llari

`useEffect` bog'liqliklari bilan ishlashda bir nechta keng tarqalgan xatolar yuzaga kelishi mumkin. Ushbu xatolarni va ulardan qanday qochishni tushunish samarali va xatolarsiz React kodini yozish uchun muhimdir.

1. Yetishmayotgan Bog'liqliklar

Eng keng tarqalgan xato - bu bog'liqliklar massiviga qo'shilishi *kerak* bo'lgan bog'liqlikni tashlab ketishdir. Bu eskirgan "closure"larga va kutilmagan xatti-harakatlarga olib kelishi mumkin. Masalan:

            
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // Potential issue: `count` is not a dependency
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Empty dependency array: effect runs only once

  return 
Count: {count}
;
}

export default Counter;

            

              
                Copy
              
            
          

Ushbu misolda `count` o'zgaruvchisi bog'liqliklar massiviga kiritilmagan. Natijada, `setInterval` callback funksiyasi har doim `count`ning boshlang'ich qiymatidan (ya'ni 0) foydalanadi. Hisoblagich to'g'ri oshmaydi. To'g'ri versiya bog'liqliklar massiviga `count`ni kiritishi kerak:

            
import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Correct: use functional update
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Now no dependency is needed since we use the functional update form.

  return 
Count: {count}
;
}

export default Counter;

            

              
                Copy
              
            
          

Olingan saboq: Har doim effekt ichida ishlatiladigan va uning tashqarisida e'lon qilingan barcha o'zgaruvchilar bog'liqliklar massiviga kiritilganligiga ishonch hosil qiling. Agar iloji bo'lsa, `count` bog'liqligiga ehtiyoj qolmasligi uchun funksional yangilanishlardan (`setCount(prevCount => prevCount + 1)`) foydalaning.

2. Keraksiz Bog'liqliklarni Qo'shish

Keraksiz bog'liqliklarni qo'shish haddan tashqari ko'p qayta renderlarga va samaradorlikning pasayishiga olib kelishi mumkin. Masalan, prop sifatida obyekt oladigan komponentni ko'rib chiqing:

            
import React, { useState, useEffect } from 'react';

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Perform some complex data processing
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Problem: `data` is an object, so it changes on every render

  function processData(data) {
    // Complex data processing logic
    return data;
  }

  if (!processedData) {
    return 
Loading...
;
  }

  return 
{processedData.value}
;
}

export default DisplayData;

            

              
                Copy
              
            
          

Bu holda, `data` obyektining tarkibi mantiqan bir xil bo'lib qolsa ham, ota komponentning har bir renderida yangi obyekt yaratiladi. Bu `useEffect` har bir renderda qayta ishga tushishini anglatadi, garchi ma'lumotlarni qayta ishlashga hojat bo'lmasa ham. Buni hal qilish uchun bir nechta strategiyalar mavjud:

1-yechim: `useMemo` bilan Memoizatsiya qilish

`data` propini memoizatsiya qilish uchun `useMemo`dan foydalaning. Bu `data` obyektini faqat uning tegishli xususiyatlari o'zgarganda qayta yaratadi.

            
import React, { useState, useEffect, useMemo } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  // Memoize the `data` object
  const data = useMemo(() => ({ value }), [value]);

  return ;
}

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Perform some complex data processing
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Now `data` only changes when `value` changes

  function processData(data) {
    // Complex data processing logic
    return data;
  }

  if (!processedData) {
    return 
Loading...
;
  }

  return 
{processedData.value}
;
}

export default ParentComponent;

            

              
                Copy
              
            
          

2-yechim: Propni Destrukturizatsiya qilish

Butun obyekt o'rniga `data` obyektining alohida xususiyatlarini prop sifatida uzating. Bu `useEffect`ga faqat u bog'liq bo'lgan maxsus xususiyatlar o'zgarganda qayta ishga tushish imkonini beradi.

            
import React, { useState, useEffect } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  return ; // Pass `value` directly
}

function DisplayData({ value }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Perform some complex data processing
    const result = processData(value);
    setProcessedData(result);
  }, [value]); // Only re-run when `value` changes

  function processData(value) {
    // Complex data processing logic
    return { value }; // Wrap in object if needed inside DisplayData
  }

  if (!processedData) {
    return 
Loading...
;
  }

  return 
{processedData.value}
;
}

export default ParentComponent;

            

              
                Copy
              
            
          

3-yechim: Qiymatlarni Solishtirish uchun `useRef`dan Foydalanish

Agar siz `data` obyektining *tarkibini* solishtirishingiz va effektni faqat tarkib o'zgarganda qayta ishga tushirishingiz kerak bo'lsa, `data`ning oldingi qiymatini saqlash va chuqur solishtirishni amalga oshirish uchun `useRef`dan foydalanishingiz mumkin.

            
import React, { useState, useEffect, useRef } from 'react';
import { isEqual } from 'lodash'; // Requires lodash library (npm install lodash)

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);
  const previousData = useRef(data);

  useEffect(() => {
    if (!isEqual(data, previousData.current)) {
      // Perform some complex data processing
      const result = processData(data);
      setProcessedData(result);
      previousData.current = data;
    }
  }, [data]); // `data` is still in the dependency array, but we check for deep equality

  function processData(data) {
    // Complex data processing logic
    return data;
  }

  if (!processedData) {
    return 
Loading...
;
  }

  return 
{processedData.value}
;
}

export default DisplayData;

            

              
                Copy
              
            
          

Eslatma: Chuqur solishtirishlar qimmatga tushishi mumkin, shuning uchun bu yondashuvdan oqilona foydalaning. Shuningdek, bu misol `lodash` kutubxonasiga tayanadi. Siz uni `npm install lodash` yoki `yarn add lodash` yordamida o'rnatishingiz mumkin.

Olingan saboq: Qaysi bog'liqliklar haqiqatan ham zarurligini diqqat bilan ko'rib chiqing. Agar tarkibi mantiqan bir xil bo'lib qolsa, har bir renderda qayta yaratiladigan obyektlar yoki massivlarni kiritishdan saqlaning. Samaradorlikni optimallashtirish uchun memoizatsiya, destrukturizatsiya yoki chuqur solishtirish usullaridan foydalaning.

3. Cheksiz Tsikllar

Bog'liqliklarni noto'g'ri boshqarish cheksiz tsikllarga olib kelishi mumkin, bunda `useEffect` hooki doimiy ravishda qayta ishga tushib, komponentingizning qotib qolishiga yoki ishdan chiqishiga sabab bo'ladi. Bu ko'pincha effekt o'zi ham bog'liq bo'lgan state o'zgaruvchisini yangilaganda sodir bo'ladi. Masalan:

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result); // Updates `data` state
      });
  }, [data]); // Problem: `data` is a dependency, so the effect re-runs when `data` changes

  if (!data) {
    return 
Loading...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Ushbu misolda effekt ma'lumotlarni yuklaydi va uni `data` state o'zgaruvchisiga o'rnatadi. Biroq, `data` ham effektning bog'liqligidir. Bu shuni anglatadiki, har safar `data` yangilanganda, effekt qayta ishga tushadi, ma'lumotlarni yana yuklaydi va `data`ni yana o'rnatadi, bu esa cheksiz tsiklga olib keladi. Buni hal qilishning bir necha yo'li mavjud:

1-yechim: Bo'sh Bog'liqliklar Massivi (Faqat Dastlabki Yuklash Uchun)

Agar siz ma'lumotlarni faqat komponent yuklanganda bir marta olishni istasangiz, bo'sh bog'liqliklar massividan foydalanishingiz mumkin:

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
      });
  }, []); // Empty dependency array: effect runs only once

  if (!data) {
    return 
Loading...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

2-yechim: Yuklash uchun Alohida State'dan Foydalanish

Ma'lumotlar yuklanganligini kuzatish uchun alohida state o'zgaruvchisidan foydalaning. Bu `data` state o'zgarganda effektning qayta ishga tushishini oldini oladi.

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (isLoading) {
      // Fetch data from an API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        });
    }
  }, [isLoading]); // Only re-run when `isLoading` changes

  if (!data) {
    return 
Loading...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

3-yechim: Shartli Ma'lumotlarni Yuklash

Ma'lumotlarni faqat ular hozirda `null` bo'lganda yuklang. Bu dastlabki ma'lumotlar yuklangandan keyingi so'rovlarning oldini oladi.

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (!data) {
      // Fetch data from an API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
        });
    }
  }, [data]); // `data` is still a dependency but the effect is conditional

  if (!data) {
    return 
Loading...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Olingan saboq: O'zi ham effektning bog'liqligi bo'lgan state o'zgaruvchisini yangilashda juda ehtiyot bo'ling. Cheksiz tsikllarning oldini olish uchun bo'sh bog'liqliklar massivlaridan, alohida yuklash holatlaridan yoki shartli mantiqdan foydalaning.

4. O'zgaruvchan (Mutable) Obyektlar va Massivlar

Bog'liqlik sifatida o'zgaruvchan obyektlar yoki massivlar bilan ishlaganda, obyekt xususiyatlari yoki massiv elementlaridagi o'zgarishlar effektni avtomatik ravishda ishga tushirmaydi. Buning sababi, React bog'liqliklarni sayoz (shallow) solishtirishidir.

            
import React, { useState, useEffect } from 'react';

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Problem: Changes to `config.theme` or `config.language` won't trigger the effect

  const toggleTheme = () => {
    // Mutating the object
    config.theme = config.theme === 'light' ? 'dark' : 'light';
    setConfig(config); // This won't trigger a re-render or the effect
  };

  return (
    

      
Theme: {config.theme}, Language: {config.language}
      Toggle Theme
    
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

Ushbu misolda `toggleTheme` funksiyasi `config` obyektini to'g'ridan-to'g'ri o'zgartiradi, bu yomon amaliyotdir. Reactning sayoz solishtiruvi `config` xotirada hali ham *o'sha* obyekt ekanligini ko'radi, garchi uning xususiyatlari o'zgargan bo'lsa ham. Buni tuzatish uchun state'ni yangilayotganda *yangi* obyekt yaratishingiz kerak:

            
import React, { useState, useEffect } from 'react';

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Now the effect will trigger when `config` changes

  const toggleTheme = () => {
    setConfig({ ...config, theme: config.theme === 'light' ? 'dark' : 'light' }); // Create a new object
  };

  return (
    

      
Theme: {config.theme}, Language: {config.language}
      Toggle Theme
    
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

Spread operatoridan (`...config`) foydalanib, biz yangilangan `theme` xususiyati bilan yangi obyekt yaratamiz. Bu qayta renderga sabab bo'ladi va effekt qayta ishga tushiriladi.

Olingan saboq: Har doim state o'zgaruvchilariga o'zgarmas (immutable) sifatida qarang. Obyektlar yoki massivlarni yangilayotganda, mavjudlarini o'zgartirish o'rniga yangi nusxalarini yarating. Yangi nusxalarni yaratish uchun spread operatori (`...`), `Array.map()`, `Array.filter()` yoki shunga o'xshash usullardan foydalaning.

Maxsus Hooklarni Bog'liqliklar bilan Optimallashtirish

Endi keng tarqalgan xatolarni tushunganimizdan so'ng, keling, bog'liqliklarni diqqat bilan boshqarish orqali maxsus hooklarni qanday optimallashtirishni ko'rib chiqaylik.

1. Funksiyalarni `useCallback` bilan Memoizatsiya qilish

Agar maxsus hookingiz boshqa `useEffect`da bog'liqlik sifatida ishlatiladigan funksiyani qaytarsa, siz funksiyani `useCallback` yordamida memoizatsiya qilishingiz kerak. Bu funksiyaning har bir renderda qayta yaratilishini oldini oladi, bu esa effektni keraksiz ravishda ishga tushirishi mumkin edi.

            
import React, { useState, useEffect, useCallback } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [url]); // Memoize `fetchData` based on `url`

  useEffect(() => {
    fetchData();
  }, [fetchData]); // Now `fetchData` only changes when `url` changes

  return { data, isLoading, error };
}

function MyComponent() {
  const [userId, setUserId] = useState(1);
  const { data, isLoading, error } = useFetchData(`https://api.example.com/users/${userId}`);

  return (
    

      {/* ... */}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Ushbu misolda `fetchData` funksiyasi `useCallback` yordamida memoizatsiya qilingan. Bog'liqliklar massivi `url`ni o'z ichiga oladi, bu funksiya xatti-harakatiga ta'sir qiluvchi yagona o'zgaruvchidir. Bu `fetchData` faqat `url` o'zgarganda o'zgarishini ta'minlaydi. Shuning uchun `useFetchData`dagi `useEffect` hooki faqat `url` o'zgarganda qayta ishga tushadi.

2. Barqaror Havolalar uchun `useRef`dan Foydalanish

Ba'zan siz effekt ichida prop yoki state o'zgaruvchisining eng so'nggi qiymatiga kirishingiz kerak bo'ladi, lekin bu qiymat o'zgarganda effektning qayta ishga tushishini xohlamaysiz. Bunday holda, qiymatga barqaror havola yaratish uchun `useRef`dan foydalanishingiz mumkin.

            
import React, { useState, useEffect, useRef } from 'react';

function LogLatestValue({ value }) {
  const latestValue = useRef(value);

  useEffect(() => {
    latestValue.current = value; // Update the ref on every render
  }, [value]); // Update the ref when `value` changes

  useEffect(() => {
    // Log the latest value after 5 seconds
    const timerId = setTimeout(() => {
      console.log('Latest value:', latestValue.current); // Access the latest value from the ref
    }, 5000);

    return () => clearTimeout(timerId);
  }, []); // Effect runs only once on mount

  return 
Value: {value}
;
}

export default LogLatestValue;

            

              
                Copy
              
            
          

Ushbu misolda `latestValue` refi har bir renderda `value` propining joriy qiymati bilan yangilanadi. Biroq, qiymatni logga chiqaradigan effekt bo'sh bog'liqliklar massivi tufayli faqat bir marta komponent yuklanganda ishga tushadi. Effekt ichida biz eng so'nggi qiymatga `latestValue.current` orqali kiramiz. Bu bizga `value`ning eng so'nggi qiymatiga `value` har safar o'zgarganda effektning qayta ishga tushishiga sabab bo'lmasdan kirish imkonini beradi.

3. Maxsus Abstraksiya Yaratish

Agar siz obyekt bilan ishlayotgan bo'lsangiz va uning xususiyatlarining faqat kichik bir qismi `useEffect` chaqiruvlari uchun muhim bo'lsa, maxsus taqqoslovchi (comparator) yoki abstraksiya yarating.

            
import React, { useState, useEffect } from 'react';

// Custom comparator to only track theme changes.
function useTheme(config) {
    const [theme, setTheme] = useState(config.theme);

    useEffect(() => {
        setTheme(config.theme);
    }, [config.theme]);

    return theme;
}

function ConfigComponent({ config }) {
    const theme = useTheme(config);

    return (
        
The current theme is {theme}
    )
}

export default ConfigComponent;

            

              
                Copy
              
            
          

Olingan saboq: Bog'liqlik sifatida ishlatiladigan funksiyalarni memoizatsiya qilish uchun `useCallback`dan foydalaning. Effektlarning qayta ishga tushishiga sabab bo'lmasdan ichkarida qiymatlarga kirish kerak bo'lganda barqaror havolalar yaratish uchun `useRef`dan foydalaning. Murakkab obyektlar yoki massivlar bilan ishlaganda, effektlarni faqat tegishli xususiyatlar o'zgarganda ishga tushirish uchun maxsus taqqoslovchilar yoki abstraksiya qatlamlarini yaratishni ko'rib chiqing.

Global Masalalar

React ilovalarini global auditoriya uchun ishlab chiqayotganda, bog'liqliklar lokalizatsiya va internatsionalizatsiyaga qanday ta'sir qilishi mumkinligini hisobga olish muhim. Mana bir nechta asosiy mulohazalar:

1. Lokal O'zgarishlari

Agar komponentingiz foydalanuvchining lokaliga bog'liq bo'lsa (masalan, sanalarni, raqamlarni yoki valyutalarni formatlash uchun), siz bog'liqliklar massiviga lokalni kiritishingiz kerak. Bu lokal o'zgarganda effektning qayta ishga tushishini va komponentning to'g'ri formatlash bilan yangilanishini ta'minlaydi.

            
import React, { useState, useEffect } from 'react';
import { format } from 'date-fns'; // Requires date-fns library (npm install date-fns)

function LocalizedDate({ date, locale }) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    setFormattedDate(format(date, 'PPPP', { locale }));
  }, [date, locale]); // Re-run when `date` or `locale` changes

  return 
{formattedDate}
;
}

export default LocalizedDate;

            

              
                Copy
              
            
          

Ushbu misolda `date-fns` kutubxonasidagi `format` funksiyasi sanani belgilangan lokalga muvofiq formatlash uchun ishlatiladi. `locale` bog'liqliklar massiviga kiritilgan, shuning uchun lokal o'zgarganda effekt qayta ishga tushadi va formatlangan sana yangilanadi.

2. Vaqt Mintaqasi Masalalari

Sanalar va vaqtlar bilan ishlaganda, vaqt mintaqalariga e'tibor bering. Agar komponentingiz sanalarni yoki vaqtlarni foydalanuvchining mahalliy vaqt mintaqasida ko'rsatsa, siz bog'liqliklar massiviga vaqt mintaqasini kiritishingiz kerak bo'lishi mumkin. Biroq, vaqt mintaqasi o'zgarishlari lokal o'zgarishlariga qaraganda kamroq uchraydi, shuning uchun vaqt mintaqasini yangilash uchun alohida mexanizmdan, masalan, global kontekstdan foydalanishni ko'rib chiqishingiz mumkin.

3. Valyutani Formatlash

Valyutalarni formatlashda to'g'ri valyuta kodi va lokaldan foydalaning. Valyuta foydalanuvchining mintaqasi uchun to'g'ri formatlanganligiga ishonch hosil qilish uchun ikkalasini ham bog'liqliklar massiviga kiriting.

            
import React, { useState, useEffect } from 'react';

function LocalizedCurrency({ amount, currency, locale }) {
  const [formattedCurrency, setFormattedCurrency] = useState('');

  useEffect(() => {
    setFormattedCurrency(new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount));
  }, [amount, currency, locale]); // Re-run when `amount`, `currency`, or `locale` changes

  return 
{formattedCurrency}
;
}

export default LocalizedCurrency;

            

              
                Copy
              
            
          

Olingan saboq: Global auditoriya uchun ishlab chiqayotganda, har doim bog'liqliklar lokalizatsiya va internatsionalizatsiyaga qanday ta'sir qilishi mumkinligini hisobga oling. Komponentlaringiz turli mintaqalardagi foydalanuvchilar uchun ma'lumotlarni to'g'ri ko'rsatishini ta'minlash uchun kerak bo'lganda lokal, vaqt mintaqasi va valyuta kodini bog'liqliklar massiviga kiriting.

Xulosa

`useEffect` bog'liqliklarini o'zlashtirish samarali, xatolarsiz va yuqori unumdorlikka ega React maxsus hooklarini yozish uchun juda muhimdir. Ushbu qo'llanmada muhokama qilingan keng tarqalgan xatolarni tushunish va optimallashtirish usullarini qo'llash orqali siz ham qayta ishlatiladigan, ham qo'llab-quvvatlanadigan maxsus hooklarni yaratishingiz mumkin. Qaysi bog'liqliklar haqiqatan ham zarurligini diqqat bilan ko'rib chiqishni, kerak bo'lganda memoizatsiya va barqaror havolalardan foydalanishni hamda lokalizatsiya va internatsionalizatsiya kabi global masalalarni yodda tutishni unutmang. Ushbu eng yaxshi amaliyotlarga rioya qilish orqali siz React maxsus hooklarining to'liq salohiyatini ochishingiz va global auditoriya uchun yuqori sifatli ilovalar yaratishingiz mumkin.

Ushbu keng qamrovli qo'llanma ko'p narsalarni qamrab oldi. Xulosa qilish uchun, mana asosiy xulosalar:

• Bog'liqliklarning maqsadini tushuning: Ular effektingiz qachon ishlashini nazorat qiladi.
• Yetishmayotgan bog'liqliklardan saqlaning: Effekt ichida ishlatiladigan barcha o'zgaruvchilar kiritilganligiga ishonch hosil qiling.
• Keraksiz bog'liqliklarni yo'q qiling: Memoizatsiya, destrukturizatsiya yoki chuqur solishtirishdan foydalaning.
• Cheksiz tsikllarning oldini oling: O'zlari ham bog'liqlik bo'lgan state o'zgaruvchilarini yangilashda ehtiyot bo'ling.
• State'ga o'zgarmas sifatida qarang: Yangilashda yangi obyektlar yoki massivlar yarating.
• Funksiyalarni `useCallback` bilan memoizatsiya qiling: Keraksiz qayta renderlarning oldini oling.
• Barqaror havolalar uchun `useRef`dan foydalaning: Qayta renderlarni ishga tushirmasdan eng so'nggi qiymatga kiring.
• Global oqibatlarni hisobga oling: Lokal, vaqt mintaqasi va valyuta o'zgarishlarini hisobga oling.

Ushbu tamoyillarni qo'llash orqali siz ilovalaringizning samaradorligi va qo'llab-quvvatlanishini yaxshilaydigan yanada mustahkam va samarali React maxsus hooklarini yozishingiz mumkin.